<template>
	<view class="list">
		<view v-for="item in info.list" class="company-info">
			<view class="info-item">
				<text class="label">审核状态</text>
				<text class="value-box" v-if="item.status==0">待审核</text>
				<text class="value-box" v-if="item.status==1">审核通过</text>
				<text class="value-box" v-if="item.status==2">审核拒绝</text>
			</view>
			<view v-if="item.rejectReason" class="info-item">
				<text class="label">拒绝原因</text>
				<text class="value-box">{{item.rejectReason}}</text>
			</view>
			<view class="info-item">
				<text class="label">提交时间</text>
				<text class="value-box">{{item.createTime}}</text>
			</view>
			<view class="info-item">
				<text class="label">付款金额</text>
				<text class="value-box">{{item.amountMoney}}</text>
			</view>
			<view class="info-item">
				<text class="label">付款用途</text>
				<text class="value-box">{{item.type}}</text>
			</view>
			<view class="info-item">
				<text class="label">用户ID</text>
				<text class="value-box">{{item.userId}}</text>
			</view>
			<view class="info-item">
				<text class="label">手机号码</text>
				<text class="value-box">{{item.phone}}</text>
			</view>
			<view v-if="item.remark" class="info-item">
				<text class="label">备注</text>
				<text class="value-box">{{item.remark}}</text>
			</view>
			<view class="info-item">
				<text class="label">付款凭证</text>
				<text class="value-box"></text>
			</view>
			<view class="info-item">
				<image @click="openImg(item.imgUrls.split(','),index)" class="imgs" v-for="(i,index) in item.imgUrls.split(',')" :src="i" mode=""></image>
			</view>
		</view>
		<loadMore :status="loadingStatus" />
		<view @click="toSubmit" class="sub">提交打款截图</view>
	</view>
</template>

<script lang="ts" setup>
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';
	import api from '@/api'
	const loadingStatus = ref("loading")
	onShow(() => {
		loadingStatus.value = 'loading'
		info.list = []
		info.getList()
	})
	onReachBottom(() => {
		if (loadingStatus.value == "more") {
			info.page++
			info.getList()
		}

	})
	const toSubmit = () => {
		uni.navigateTo({
			url: `/pages/payment/uploadBargainInfo/index`
		})
	}
	const openImg = (item,index) => {
		uni.previewImage({
			current:index,
			urls: item 
		});
	}
	let info = reactive<any>({
		page: 1,
		limit: 10,
		list: [],
		getList: async () => {
			const res : any = await api({
				method: 'get',
				url: '/mall/user/user_payment_voucher_record/page',
				data: {
					page: info.page,
					limit: info.limit
				}
			})
			info.list = info.list.concat(res.data.records)
			if (info.list.length == 0) {
				loadingStatus.value = "empty"
			} else if (res.data.records.length < info.limit) {
				loadingStatus.value = "noMore"
			} else {
				loadingStatus.value = "more"
			}
		}
	})
</script>

<style lang="scss" scoped>
	.list {
		padding: 30rpx;
		box-sizing: border-box;

		.company-info {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;

			.info-item:last-child {
				margin-bottom: 0;
			}

			.info-item {
				margin-bottom: 24rpx;
				display: flex;
				flex-wrap: wrap;
				// justify-content: space-between;

				.label {
					width: 140rpx;
					font-size: 28rpx;
					color: #666666;
					flex-shrink: 0;
				}

				.value-box {}

				.imgs:nth-child(3n) {
					margin-right: 0 !important;
				}

				.imgs {
					width: 30%;
					height: 180rpx;
					flex-shrink: 0;
					margin-right: 5%;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.sub {
		position: fixed;
		right: 0;
		bottom: 15vh;
		padding: 30rpx 46rpx;
		color: #ffffff;
		font-size: 32rpx;
		background-color: var(--color-primary);
		border-radius: 100rpx 0 0 100rpx;
	}
</style>